<template>
  <section class="result">
    <el-table :data="codes" style="width: 100%">
      <el-table-column label="唯一标识" align="center" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="代码名称" align="center">
        <template slot-scope="scope">
            {{ scope.row.codeName }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="operateBtn(scope.row.id, 'modify')">编辑</el-button>
          <el-button size="mini" type="danger" @click="operateBtn(scope.row.id, 'del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="pageChange"
      @size-change="sizeChange"
      :current-page.sync="listPage.currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </section>
</template>

<script>
import DateUtil from "@/utils/date";
const avatar = require("@/assets/avatar.jpg");
export default {
  props: ["codes", "pageSize", "total", "changePage", "deleteCodeById"],
  data() {
    return {
      listPage: {
        currentPage: 1
      }
    };
  },
  methods: {
    noAction: function() {
      alert("该功能暂未实现");
    },
    // 页码变化 调用上层组件的方法
    pageChange(newPage) {
      this.changePage && this.changePage({ page: newPage });
    },
    sizeChange(val) {
      this.changePage && this.changePage({ size: val });
    },
    // 重新设置页码
    dateFormat(time) {
      return DateUtil.format13(time);
    },
    // 操作 删除、编辑
    operateBtn(Id, type) {
      console.log(Id,type)
      switch (type) {
        case "modify":
          this.$router.push({ path: "/code/modify", query: { id: Id } });
          break;
        case "del":
          this.$confirm("此操作将删除该案例代码, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.deleteCodeById(Id); // 删除
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
          break;
        default:
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/element-variables.scss";

.content-card {
  display: flex;
  padding-left: 6px;
  padding-bottom: 30px;
  flex-wrap: wrap;

  .item-card {
    position: relative;
    width: 233px;
    height: 315px;
    margin-top: 30px;
    margin-left: 30px;
    border-radius: 8px;
    border: 1px solid $--background-color-base;

    .image {
      display: block;
      width: 100%;
      height: 155px;
      object-fit: cover;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .top {
      position: absolute;
      top: 21px;
      right: 17px;
      display: none;
      -webkit-transition: 0.3s;
      transition: 0.3s;

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: 16px;
        background: $--color-white;
        border-radius: 50%;
        cursor: pointer;

        .icon {
          width: 30px;
          height: 30px;
        }
      }
    }

    .content {
      padding: 22px 16px 0 17px;

      .center {
        height: 30px;
        color: #20232a;
        font-weight: 600;
        line-height: 30px;
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 13px;

        .time {
          font-size: 14px;
          color: $--color-text-secondary;
          line-height: 19px;
        }

        .draft {
          padding: 3px 7px;
          background: #f0f3f9;
          border-radius: 4px;
          color: $--color-text-secondary;
        }

        .audit {
          padding: 3px 7px;
          background: #eef4ff;
          border-radius: 4px;
          color: $--color-primary;
        }

        .publish {
          padding: 3px 7px;
          background: #ebf7f2;
          border-radius: 4px;
          color: $--color-success;
        }

        .unaudit {
          padding: 3px 7px;
          background: #ffefef;
          border-radius: 4px;
          color: $--color-danger;
        }
      }
    }
  }

  .item-card:hover .top {
    display: flex;
  }
}

.el-pagination {
  border-top: 2px solid #ebeef5;
}
</style>
